import React, { useEffect, useState } from 'react';
import AxCardList from '@/components/AxCardList';
import router from 'umi/router';
import { axhelper } from '@/shared/axhelper';
import { AxButton, AxCard } from '@/components/AxBase';
import { Col, Row, Form } from 'antd';
import { AxCreateFormPage } from '@/components/AxForm/AxCreateForm';
import { AxInput } from '@/components/AxForm/AxFormItem';
import User from './components/user';

const Index: React.FC<any> = props => {
  const { form } = props;
  const [tabKey, setTabKey] = useState('tab1');
  useEffect(() => {
    axhelper.getPermission();
  }, []);

  const title = {
    desc:
      '段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。段落示意：蚂蚁金服务设计平台 ant.design，用最小的工作量，无缝接入蚂蚁金服生态，提供跨越设计与开发的体验解决方案。',
    links: [
      {
        text: '快速开始',
        src: 'https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg',
      },
      {
        text: '产品简介',
        src: 'https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg',
      },
      {
        text: '产品文档',
        src: 'https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg',
      },
    ],
    extra: {
      src: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
    },
  };

  const data = [
    {
      id: 1,
      icon: 'plus',
      title: '项目经费1',
      desc: (
        <>
          <a>删除</a>
        </>
      ),
      click: () => router.push({ pathname: '/buyer/fund/manage' }),
    },
    {
      id: 2,
      icon: 'plus',
      title: '项目经费2',
      desc: (
        <>
          <a>删除</a>
        </>
      ),
      click: () => router.push({ pathname: '/buyer/fund/manage' }),
    },
    {
      id: 2,
      icon: 'plus',
      title: '项目经费3',
      desc: (
        <>
          <a>删除</a>
        </>
      ),
      click: () => router.push({ pathname: '/buyer/fund/manage' }),
    },
    {
      id: 2,
      icon: 'plus',
      title: '项目经费4',
      desc: (
        <>
          <a>删除</a>
        </>
      ),
      click: () => router.push({ pathname: '/buyer/fund/manage' }),
    },
    {
      id: 2,
      icon: 'plus',
      title: '项目经费5',
      desc: (
        <>
          <a>删除</a>
        </>
      ),
      click: () => router.push({ pathname: '/buyer/fund/manage' }),
    },
  ];

  return (
    <>
      <AxCard style={{ border: 0 }}>
        <p style={{ fontSize: 16, fontWeight: 'normal' }}>消息管理</p>
      </AxCard>
      <AxCard style={{ border: 0 }}>
        <AxCardList
          showAction={false}
          withPageHeaderWrapper={false}
          title={title}
          data={data}
          span={1}
        />
      </AxCard>
    </>
  );
};

export default Form.create<any>()(Index);
